<template>
    <div class="box">
        <header>
            <van-nav-bar title="收货地址管理" @click-left="$router.back()">
                <template #left>
                    <van-icon name="arrow-left" size="18" color="black" />
                </template>
            </van-nav-bar>
        </header>
        <!-- 收货地址管理 -->
        <main>
            <van-swipe-cell v-for="(item, index) in list" :key="index">

                <!-- 商品卡片 -->
                <van-card>
                    <template #title>
                        <div class="title">
                            <h3>{{ item.name }}</h3>
                            <h3>{{ item.tel }}</h3>
                        </div>
                    </template>
                    <template #desc>
                        <div class="desc">
                            <p>
                                {{ item.province }} {{ item.city }} {{ item.county }}
                                {{ item.addressDetail }}
                            </p>
                        </div>
                    </template>
                    <!-- 点击编辑 -->
                    <template #footer>
                        <van-icon name="edit" size="20" @click='$router.push("/updateaddress")' />
                    </template>
                    <!-- <template #tags v-if="item.isDefault">
                        <van-tag plain type="danger">默认</van-tag>
                    </template> -->
                </van-card>
            </van-swipe-cell>
        </main>
        <!-- 下面 -->
        <footer>
            <van-button type="danger" round block :disabled="flag" @click='$router.push("/toaddress")'>添加地址</van-button>
        </footer>
    </div>
</template>

<script>
import { goAddressList } from "../api/address"

export default {
    data() {
        return {
            chosenAddressId: '1',
            list: []
        }
    },
    created() {
        goAddressList({ userid: localStorage.getItem("userid") }).then((res) => {
            this.list = res.data.data;
            // console.log(res);
            // console.log(this.list);
        });
    },
}
</script>

<style scoped>
footer {
    width: 80%;
    margin: 20px auto;
    position: fixed;
    bottom: 0px;
    margin-left: .4rem;
}
main{
    display: dlex;
    overflow: auto;
}
::v-deep.van-card {
    border-bottom: 1px solid red;
}
</style>